<template>
  <div>
    <el-menu  class="el-menu-demo" mode="horizontal">

      <el-image
        style="width: 120px; height: 40px ; float: left;margin-left: 10%;margin-top: 10px"
        src="https://sf1-scmcdn-tos.pstatp.com/goofy/bcy/image/logo-home.fff267.png">
      </el-image>

      <div style="margin-left: 2%;width: 300px ; float: left">
        <el-input placeholder="搜索COS、视频、用户..." v-model="input" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>


      <el-menu-item index="3" style="margin-left: 26%;float: left" ><i class="el-icon-house"></i>首页</el-menu-item>
      <el-menu-item index="4" style="float: left" ><i class="el-icon-bangzhu"></i>购物车</el-menu-item>
      <el-menu-item index="5"><i class="el-icon-bell"></i>消息</el-menu-item>

      <div>
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="float: left"></el-avatar>
      </div>

      <el-button type="danger" style="float: left;margin-left: 2%"><i class="el-icon-edit-outline"></i>发布</el-button>

    </el-menu>
    <el-container>
      <el-container>
        <!-- 内容主体区域 -->
        <el-main id="content">
          <el-table
            ref="multipleTable"
            :data="orderlist"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="oid"
              label="订单号"
              width="120">
            </el-table-column>
            <el-table-column
              prop="userName"
              label="用户名"
              width="120">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="订单日期"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="num"
              label="商品数量"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="price"
              label="价格"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="status"
              label="订单状态"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              fixed="right"
              prop="oid"
              label="操作"
              width="200">
              <template slot-scope="scope">
                <el-button type="danger"  @click.native.prevent="deleteRow(scope.$index, orderlist,scope.row.oid)" icon="el-icon-delete" circle></el-button>
              </template>
            </el-table-column>

          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.page"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="params.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-main>
      </el-container>
    </el-container>
    <el-button type="success"  plain @click="submit()">立即支付</el-button>
    <div v-html="alipayWap" ref="alipayWap"></div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: "index",

    data() {
      return {
        total:10,
        params:{
          size:1,
          page:1
        },
        alipayWap:'',
        order:{},
        dialogVisible:false,
        orderlist: [],
        multipleSelection: [],
        input:'',
        money:0
      }
    },
    methods: {
      submit:function(){
        console.log(this.multipleSelection)
        var money = this.money
        for (var i = 0; i < this.multipleSelection.length; i++) {
            money = this.multipleSelection[i].price
            this.money = money
        }
        console.log(this.money)
        if (this.money != 0) {
          axios.post("http://localhost/bcy-alipay/pay",{price:this.money}).then(res=>{
            this.alipayWap=res.data;

            this.$nextTick(() => {
              //将form表单进行提交，请求支付宝
              this.$refs.alipayWap.children[0].submit()
            })
          })
        }else {
          alert("请选择要支付的订单")
        }

      },
      findAll:function(){
        axios.get("http://localhost/bcy-order/order/findAll/"+this.params.page+"/"+this.params.size).then(res=>{
          this.orderlist=res.data.data;
          console.log( this.orderlist)
          this.total = res.data.count;
        })
      },
      handleSizeChange(val) {
        this.params.size=val;
        this.findAll();
      },
      handleCurrentChange(val) {
        this.params.page =val;
        this.findAll();
      },
      moSunbmit:function () {
        this.$confirm('是否提交修改, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(this.order)
          //请求后台进行修改数据
          axios.post("http://localhost/hll-orders/orders/update",this.order).then(res=> {
            //关闭模态窗口
            this.$message({
              type: 'success',
              message: '提交成功!'

            });
          })
          this.dialogVisible=false;
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消提交'
          });
        });
      }, handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      deleteRow(index, rows,id) {
        //进行购物车得结算操作
        //定义body
        confirm("是否删除订单")
        axios.post("http://localhost/bcy-order/order/del",{oid:id}).then(res=>{
          if(res.data.code==1){
            alert(res.data.message)
            rows.splice(index, 1);
            // this.$router.push("/orders")
            // this.reload()
          }
          // this.alipayWap=res.data;
          // this.$nextTick(() => {
          //   this.$refs.alipayWap.children[0].submit()
          // })
        })

      },
      handleClick(row) {
        this.dialogVisible=true;
        this.order=row;
      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      denglu:function () {
        this.$router.push("/login")
      },onorder:function () {
        this.$router.push("/order")
      },ordersDo:function () {
        this.$router.push("/orders")
      },todrivers:function () {
        this.$router.push("/driver_join")
      }
    }, mounted(){
      this.findAll();
    }

  }
</script>

<style scoped>


</style>
